<template>
    <div class="fullScreen bg-c-g lineh-2"> 
        <m-header :msg="checkTypeName"></m-header>
        <div class="scroll-box">
            <div v-if="checkTypeId == '4' || checkTypeId == '5'">
                <div class="ewm-box">
                    <div class="flex-box">
                        <div class="text-w">收款账号：&nbsp;&nbsp;</div>
                        <div class="tx-c-222">{{ checkTypeMsg.acc }}</div>
                    </div>
                    <div class="flex-box">
                        <img class="iconSize" :src="checkTypeMsg.pic"/> 
                    </div>
                </div>
                <div class="ewm-box">
                    <div class="tx-c-o tx-s-12">转账完成后，请尽快填写订单资料，以便我们尽快为您充值！</div>
                    <div class="flex-box mar-t-25">
                        <div class="text-w">存入金额：&nbsp;&nbsp;</div>
                        <div class="flex-f1 bor-b-g">
                            <input v-model="amount" class="input" type="number" placeholder="请输入存款金额"/>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="text-w">存入账号：&nbsp;&nbsp;</div>
                        <div class="flex-f1 bor-b-g">
                            <input v-model="acco" class="input" placeholder="请输入存款账号"/>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="text-w">存款人姓名：&nbsp;&nbsp;</div>
                        <div class="flex-f1 bor-b-g">
                            <input v-model="name" class="input" placeholder="请输入存款人姓名"/>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="checkTypeId != '4' && checkTypeId != '5'">
                <div class="ewm-box">
                    <div class="flex-box">
                        <div class="text-w">银行：&nbsp;&nbsp;</div>
                        <div class="tx-c-222">{{ checkTypeMsg.title }}</div>
                    </div>
                    <div class="flex-box">
                        <div class="text-w">收款人：&nbsp;&nbsp;</div>
                        <div class="tx-c-222">{{ checkTypeMsg.name }}</div>
                    </div>
                    <div class="flex-box">
                        <div class="text-w">开户行网点：&nbsp;&nbsp;</div>
                        <div class="tx-c-222">{{ checkTypeMsg.fhname }}</div>
                    </div>
                    <div class="flex-box bor-b-g">
                        <div class="text-w">账号：&nbsp;&nbsp;</div>
                        <div class="tx-c-222">{{ checkTypeMsg.acc }}</div>
                    </div>
                    <div class="notice1">
                        <span class="tx-c-r">*注意：</span><br/>
                        1.建议使用微信或支付宝，即时到账；<br/>
                        2.网银转账请使用同行，跨行收款会有延迟。
                    </div>
                </div>
                <div class="ewm-box">
                    <div class="flex-box mar-t-25">
                        <div class="text-w">存入金额：&nbsp;&nbsp;</div>
                        <div class="flex-f1 bor-b-g">
                            <input v-model="amount" class="input" type="number" placeholder="请输入存款金额"/>
                        </div>
                    </div>
                    <div class="flex-box">
                        <div class="text-w">存款人姓名：&nbsp;&nbsp;</div>
                        <div class="flex-f1 bor-b-g">
                            <input v-model="name" class="input" placeholder="请输入存款人姓名"/>
                        </div>
                    </div>
                    <div class="notice2 tx-s-12">贴心提示：充值完成后，请静待3-5分钟重新刷新页面，财务收到转账后会立即为您充值！</div>
                </div>
            </div>
            <div class="flex-box flex-ac flex-pa btn">
                <div class="cancel-btn-s" @click="toBack">取消</div>
                <div class="submit-btn-s" @click="toSubmit">提交</div>
            </div> 
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import { getClass } from '../../common/js/common'
import { getRechargeTypeMsg, sendPay } from '../../common/js/axiosUtil'
export default {
    data () {
        return {
            amount : '',
            acco : '',
            name : '',
            checkTypeName : '',
            checkTypeId : '',
            checkTypeMsg : ''
        }
    },
    created () {
        this.checkTypeId = this.$route.query.checkTypeId
        this.checkTypeName = this.$route.query.checkTypeName
        this.rechargeTypeMsg()
    },
    methods : {
        rechargeTypeMsg () {
            this.$toast('加载中...', 1000000)
            let params = this.$params(1)
            params.append('id', this.checkTypeId)
            getRechargeTypeMsg(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200'){
                    let data = response.data.data
                    this.checkTypeMsg = data[0]
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error) => {
                this.$toast('请求服务失败', 2000)
            })
        },
        toBack () {
            this.$router.go(-1)
        },
        toSubmit () { 
            // 通过ClassName获取需填项
            const arr = getClass("input")
            // 判断各项是否已填写
            if(this.$checkWrite(arr, 'toast')){
                return
            }
            this.$toast('提交中...', 1000000)
            let params = this.$params(1)
            params.append('id', this.checkTypeMsg.id)
            params.append('type', '3')
            params.append('bank', this.checkTypeMsg.title)
            params.append('depositMoney', this.amount)
            params.append('depositors', this.name)
            if(this.checkTypeId == '4' || this.checkTypeId == '5'){
                params.append('bankAcco', this.acco)
            }
            sendPay(params)
            .then((response) => {
                this.$toastClose()
                if(response.data.code == '200'){
                    this.$router.replace('/rechargeResult')
                } else {
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error) => {
                this.$toast('请求服务失败', 2000)
            })
        }
    },
    components: {
        MHeader
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .scroll-box
        position: fixed
        width: 100%
        top: 2.5rem
        bottom: 4rem
        margin-top: .125rem
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display: none
    .ewm-box
        background : white
        margin-top : .5rem
        padding : .5rem
        font-size : $fonts-14
        color : $color-6
    .iconSize
        width: 8rem
        height: 8rem
        margin: 0 auto
        background-size: 100% 100%
    .text-w
        width : 7rem
        text-align : right
    .notice1
        margin : .5rem .5rem 0 .5rem
        line-height : 1.25rem
    .notice2
        margin : 1rem .5rem 0 .5rem
        line-height : 1.125rem
        color : $color-r
    .input
        width : 100%
        outline : none
    .btn
        height : 4rem
        line-height : 2rem
        margin-top : 2rem
        font-size : $fonts-14
</style>